<template>
	<view>
		<image src="/static/common/bg1.png" class="pagebg1" mode=""></image>
		<u-navbar :safeAreaInsetTop="true" title="我的订单" :autoBack="true" :bgColor="'rgba(255,255,255,'+opc+')'"
			placeholder>

		</u-navbar>
		<view class="pagecon">
			<view class="tabbox">
				<u-tabs :list="list4" lineWidth="53rpx" lineHeight='11rpx' lineColor="#E3432D" :activeStyle="{
				            color: '#010101',
				            fontWeight: 'bold',
				        }" :inactiveStyle="{
				            color: '#010101'
				        }" :current='cur' itemStyle="padding-left: 46rpx; padding-right: 46rpx; height: 60rpx;font-szie:28rpx;"
					@change="change">
				</u-tabs>
			</view>
		</view>
		<u-empty mode="data" icon="http://cdn.uviewui.com/uview/empty/data.png" v-if="list.length==0">
		</u-empty>
		<view class=""
			:style="{height:'calc(100vh - 44px - 56rpx - 20rpx - 60rpx - '+$u.addUnit($u.sys().statusBarHeight)+')'}">
			<scroll-view scroll-y="true" style="height: 100%;">
				<view class="list">
					<view class="list__item" v-for="(item,index) in list" :key="index">
						<view class="list__item__number" style="margin-bottom: 30rpx;"
							@click="navto('/pages/goods/orderdetails?status='+item.status+'&cur='+cur+'&id='+item.id)">
							订单编号: {{item.order_sn}}
							<view class="status" v-if="cur==0">
								等待支付
							</view>
							<view class="status" v-if="cur==1">
								等待发货
							</view>
							<view class="status" v-if="cur==2">
								已发货
							</view>
							<view class="status" v-if="item.refund_status==2">
								待退款
							</view>
							<view class="status" v-if="item.refund_status==3">
								已退款
							</view>
							<view class="status" v-if="item.refund_status==4">
								商家拒绝退款
							</view>
						</view>
						<view class="u-flex u-flex-y-center" v-if="item.goods"
							@click="navto('/pages/goods/orderdetails?status='+item.status+'&cur='+cur+'&id='+item.id)">
							<image :src="$getImg(item.goods.image)" class="list__item__pic" mode="aspectFill"></image>
							<view class=""
								style="height: 168rpx;display: flex;flex-direction: column;justify-content: space-between;">
								<view class="">
									<view class="list__item__name">
										{{item.goods.name}}
									</view>
									<view class="list__item__num">
										×{{item.num}}
									</view>
								</view>
								<view class="list__item__price">
									{{item.goods.price}}
								</view>
							</view>
						</view>
						<view class="" v-else
							@click="navto('/pages/goods/orderdetails?status='+item.status+'&cur='+cur+'&id='+item.id)">
							<view class="u-flex u-flex-y-center" v-for="(item2,index2) in item.goodslist" :key="index2"
								style="margin-bottom: 20rpx;">
								<image :src="$getImg(item2.image)" class="list__item__pic" mode="aspectFill"></image>
								<view class=""
									style="height: 168rpx;display: flex;flex-direction: column;justify-content: space-between;">
									<view class="">
										<view class="list__item__name">
											{{item2.name}}
										</view>
										<view class="list__item__num">
											×{{item2.num}}
										</view>
									</view>
									<view class="list__item__price">
										{{item2.price}}
									</view>
								</view>
							</view>
						</view>
						<view style="margin-top: 20rpx;text-align: right;color:#FD2A00;font-size: 36rpx;"
							@click="navto('/pages/goods/orderdetails?status='+item.status+'&cur='+cur+'&id='+item.id)">
							<text style="color: black;font-size: 30rpx;">总计：</text> <text
								style="font-size: 24rpx;">￥</text> <text
								style="font-weight: 600;">{{item.total_price}}</text>
						</view>
						<view class="u-flex u-flex-items-start" style="margin-top: 20rpx;">
							<view class="list__item__bz" style="width: 400rpx;">
								备注：{{item.remark}}
							</view>

							<!-- 			<u-button v-if="cur==0||cur==1"
								:customStyle="{width:'158rpx',height:'64rpx',padding:0,fontSize:'24rpx',margin:'0',color:'#242424'}"
								plain shape='circle' color="#EEEEEE" text="取消订单"></u-button> -->
							<u-button v-if="cur==0"
								:customStyle="{width:'158rpx',height:'64rpx',padding:0,fontSize:'24rpx',margin:'0 0 0 20rpx',color:'#DA2111'}"
								plain shape='circle' color="#DA2111" text="继续付款"></u-button>

							<u-button v-if="cur==2&&item.status==1"
								:customStyle="{width:'158rpx',height:'64rpx',padding:0,fontSize:'24rpx',margin:'0',color:'#242424'}"
								plain shape='circle' color="#EEEEEE" text="查看物流"
								@click="navto('/pages/goods/orderdetails?status='+item.status+'&cur='+cur+'&id='+item.id)"></u-button>
							<!-- <u-button v-if="cur==1||cur==3"
								:customStyle="{width:'158rpx',height:'64rpx',padding:0,fontSize:'24rpx',margin:'0 0 0 20rpx',color:'#DA2111'}"
								plain shape='circle' color="#DA2111" text="查看详情"
								@click="navto('/pages/goods/orderdetails?status='+item.status+'&cur='+cur+'&id='+item.id)"></u-button>
								
							<u-button v-if="cur==2&&item.status!=1"
								:customStyle="{width:'158rpx',height:'64rpx',padding:0,fontSize:'24rpx',margin:'0',color:'#242424'}"
								plain shape='circle' color="#EEEEEE" text="查看详情"
								@click="navto('/pages/goods/orderdetails?status='+item.status+'&cur='+cur+'&id='+item.id)"></u-button> -->

							<!-- 			<u-button v-if="cur==2&&item.status==2"
								:customStyle="{width:'158rpx',height:'64rpx',padding:0,fontSize:'24rpx',margin:'0 0 0 20rpx',color:'#DA2111'}"
								plain shape='circle' color="#DA2111" text="确认收货"></u-button> -->
							<!-- 					<u-button v-if="item.status==3 && !item.is_comment"
								:customStyle="{width:'158rpx',height:'64rpx',padding:0,fontSize:'24rpx',margin:'0 0 0 20rpx',color:'#DA2111'}"
								plain shape='circle' color="#DA2111" text="去评价"
								@click="navto('/pages/goods/createeva?id='+item.id)"></u-button> -->
							<u-button v-if="item.status==3 && !item.is_comment"
								:customStyle="{width:'158rpx',height:'64rpx',padding:0,fontSize:'24rpx',margin:'0 0 0 20rpx',color:'#DA2111'}"
								plain shape='circle' color="#DA2111" text="去评价"
								@click="navto('/pages/goods/createeva?id='+item.id)"></u-button>
							<u-button v-if="cur==2&&item.status==3"
								:customStyle="{width:'158rpx',height:'64rpx',padding:0,fontSie:'24rpx',margin:'0 0 0 20rpx',color:'#DA2111'}"
								plain shape='circle' color="#DA2111" text="查看评价"></u-button>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import {
		getOrders,
		orderInfo
	} from "@/request/api/order.js"
	export default {
		data() {
			return {
				opc: 0,
				list4: [{
					name: '待付款'
				}, {
					name: '待发货',
				}, {
					name: '待收货'
				}, {
					name: '已完成'
				}, {
					name: '退换/售后'
				}, ],
				cur: 0,
				orderList: [],
				list: []
			}
		},
		onShow() {
			this.getList()
		},
		methods: {
			change(e) {
				this.cur = e.index;
				this.getList()
			},
			getList() {
				let param = {}
				if (this.cur == 0) {
					param = {
						paystatus: 1
					}
				}
				if (this.cur == 1) {
					param = {
						status: 1
					}
				}
				if (this.cur == 2) {
					param = {
						status: 2
					}
				}
				if (this.cur == 3) {
					param = {
						status: 3
					}
				}
				if (this.cur == 4) {
					param = {
						refund_status: 2
					}
				}
				this.list = [];
				if (this.cur == 4) {
					getOrders(param).then(res => {
						this.list = res.data;
						if (this.cur == 4) {
							getOrders({
								refund_status: 3
							}).then(res1 => {
								this.list = [...this.list, ...res1.data];
							})

						}
					})
				} else {
					getOrders(param).then(res => {
						this.list = res.data.filter(item => item.refund_status == 1 || item.refund_status == 4);
						console.log(this.list)

					})

				}


			}
		},
		onLoad(o) {
			this.cur = o.status;

		}
	}
</script>

<style lang="scss">
	page {
		background-color: #fef8f7;
	}

	.tabbox {
		padding: 28rpx 0 28rpx 8rpx;
	}

	.list {
		padding: 0 30rpx 2rpx;

		&__item {
			background: #FFFFFF;
			border-radius: 20rpx 20rpx 20rpx 20rpx;
			margin-bottom: 30rpx;
			padding: 39rpx 30rpx 30rpx;

			&__number {
				font-family: PingFang-SC, PingFang-SC;
				font-weight: 500;
				font-size: 26rpx;
				color: #606060;
				line-height: 26rpx;
				margin-bottom: 20rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
			}

			.status {
				font-family: PingFang-SC, PingFang-SC;
				font-weight: 500;
				font-size: 24rpx;
				color: #FD2A00;
				line-height: 24rpx;
			}

			&__pic {
				width: 168rpx;
				height: 168rpx;
				background: #896CAD;
				border-radius: 20rpx 20rpx 20rpx 20rpx;
				margin-right: 20rpx;
			}

			&__name {
				font-family: PingFang-SC, PingFang-SC;
				font-weight: 500;
				font-size: 30rpx;
				color: #1E1E1E;
				line-height: 48rpx;
			}

			&__num {
				font-family: PingFang-SC, PingFang-SC;
				font-weight: 500;
				font-size: 22rpx;
				color: #727272;
				line-height: 42rpx;
			}

			&__price {
				font-family: DINNextLTPro;
				font-weight: 500;
				font-size: 38rpx;
				color: #FD2A00;
				line-height: 27rpx;

				&::before {
					content: "￥";
					font-size: 24rpx;
				}
			}

			&__bz {
				font-family: PingFang-SC, PingFang-SC;
				font-weight: 500;
				font-size: 24rpx;
				color: #6A6A6A;
				line-height: 24rpx;
				flex: 1;
			}

		}
	}
</style>